<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="searchKeyword"
        placeholder="请输入关键词"
        style="width: 200px"
        class="filter-item"
        @keyup.enter.native="handleSearch"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleSearch"
      >
        搜索
      </el-button>
    </div>

    <el-table
      v-loading="loading"
      :data="videoList"
      border
      style="width: 100%"
    >
      <el-table-column
        type="index"
        label="序号"
        width="80"
        align="center"
        :index="getIndex"
      />
      <el-table-column
        prop="video_id"
        label="视频ID"
        width="100"
        align="center"
      />
      <el-table-column
        prop="video_title"
        label="视频标题"
        min-width="200"
      />
      <el-table-column
        prop="video_desc"
        label="视频描述"
        min-width="300"
      >
        <template slot-scope="scope">
          <div class="video-desc-content">
            {{ scope.row.video_desc }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="视频封面"
        width="150"
        align="center"
      >
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.video_coverimg"
            :src="scope.row.video_coverimg"
            :preview-src-list="[scope.row.video_coverimg]"
            fit="cover"
            style="width: 100px; height: 56px"
          >
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline" />
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        label="播放地址"
        min-width="300"
      >
        <template slot-scope="scope">
          <div class="play-urls">
            <div v-if="scope.row.video_wxurl" class="url-item">
              <span class="url-label">微信：</span>
              <el-link
                type="primary"
                :href="scope.row.video_wxurl"
                target="_blank"
              >
                {{ scope.row.video_wxurl }}
              </el-link>
            </div>

            <div v-if="scope.row.video_dyurl" class="url-item">
              <span class="url-label">抖音：</span>
              <el-link
                type="primary"
                :href="scope.row.video_dyurl"
                target="_blank"
              >
                {{ scope.row.video_dyurl }}
              </el-link>
            </div>

            <div v-if="scope.row.video_ksurl" class="url-item">
              <span class="url-label">快手：</span>
              <el-link
                type="primary"
                :href="scope.row.video_ksurl"
                target="_blank"
              >
                {{ scope.row.video_ksurl }}
              </el-link>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="currentPage"
      :limit.sync="pageSize"
      @pagination="getVideoList"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { listVideo, deleteVideo } from '@/api/videoapi'
import Pagination from '@/components/Pagination'

export default {
  name: 'List',
  components: { Pagination },
  data() {
    return {
      videoList: [],
      total: 0,
      loading: false,
      currentPage: 1,
      pageSize: 10,
      searchKeyword: ''
    }
  },
  created() {
    this.getVideoList()
  },
  activated() {
    console.log('page  activated')
    this.getVideoList()
  },
  methods: {
    getVideoList() {
      this.loading = true
      const params = {
        page: this.currentPage,
        pageSize: this.pageSize,
        keyword: this.searchKeyword
      }
      listVideo(params).then(response => {
        if (response.code === 20000) {
          this.videoList = response.data.items || []
          this.total = response.data.total || 0
        } else {
          this.$message.warning(response.message || '获取数据异常')
        }
        this.loading = false
      })
    },

    handleSearch() {
      this.currentPage = 1
      this.getVideoList()
    },

    handleSizeChange(val) {
      this.pageSize = val
      this.getVideoList()
    },

    handleCurrentChange(val) {
      this.currentPage = val
      this.getVideoList()
    },

    handleEdit(row) {
      this.$router.push(`/videos/edit/${row.video_id}`)
    },

    handleDelete(row) {
      this.$confirm('此操作将永久删除该视频, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        deleteVideo(row.video_id).then(res => {
          if (res.code === 20000) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            // 重新加载列表数据
            this.getVideoList()
          } else {
            this.$message.error(res.message || '删除失败')
          }
        }).catch(error => {
          console.error('删除失败:', error)
          this.$message.error('删除失败，请重试')
        }).finally(() => {
          this.loading = false
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    getIndex(index) {
      return (this.currentPage - 1) * this.pageSize + index + 1
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-container {
  padding-bottom: 10px;
}

.filter-item {
  margin-right: 10px;
}

.play-urls {
  .url-item {
    margin-bottom: 8px;
    line-height: 1.4;

    &:last-child {
      margin-bottom: 0;
    }

    .url-label {
      color: #606266;
      margin-right: 4px;
      font-weight: 500;
    }

    .el-link {
      word-break: break-all;
    }
  }
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 20px;
}

.el-image {
  border-radius: 4px;
  overflow: hidden;

  &:hover {
    cursor: pointer;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }
}

.video-desc-content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  max-height: 4.5em; // line-height * 3行
}
</style>
